<template>
  <div class="article-detail-wrapper">
    <el-descriptions title="基本信息" border :column="2">
      <el-descriptions-item label="文章标题">
        {{ data?.title }}
      </el-descriptions-item>
      <el-descriptions-item label="文章类别">
        <RenderDict tag :value="data?.category" />
      </el-descriptions-item>
      <el-descriptions-item label="文章标签">
        <RenderDict tag :value="data?.tag" />
      </el-descriptions-item>
      <el-descriptions-item label="简介">
        {{ data?.desc }}
      </el-descriptions-item>
      <el-descriptions-item label="缩略图">
        <el-image style="width: 60px; height: 60px" :src="data?.picture" />
      </el-descriptions-item>
      <el-descriptions-item label="创建时间">
        {{ data?.createdAt }}
      </el-descriptions-item>
      <el-descriptions-item label="更新时间">
        {{ data?.updatedAt }}
      </el-descriptions-item>
    </el-descriptions>
    <div class="article-content-wrapper">
      <el-descriptions title="文章内容" border :column="2"></el-descriptions>
      <MdPreview :editorId="id" :modelValue="data?.markdown" :theme="theme" />
      <!-- <MdCatalog :editorId="id" :scrollElement="scrollElement" /> -->
    </div>
  </div>
</template>

<script lang="js" setup>
import { ref, onMounted, inject, computed } from "vue"
import { articleDetailApi } from "@/api/article"
import { useRoute, useRouter } from "vue-router"
import { MdPreview, MdCatalog } from 'md-editor-v3';
// preview.css相比style.css少了编辑器那部分样式
import 'md-editor-v3/lib/preview.css';
import { getWatermarkImgimage } from "@/utils/qiniu";

const isDark = inject('isDark', ref('light'));
const theme = computed(() => isDark.value === 'dark' ? 'dark' : 'light');

const id = 'preview-only';
const scrollElement = document.documentElement;
const router = useRouter()
const route = useRoute()

const data = ref();

const init = async () => {
  const id = route.params?.id;
  if (id) {
    const row = await articleDetailApi(id)
    const pic = await getWatermarkImgimage(row.picture);
    data.value = { ...row, picture: pic };
  }
}

onMounted(() => {
  init()
})
</script>

<style lang="less" scoped>
.article-detail-wrapper {
  .article-content-wrapper {
    margin-top: 16px;
    :deep(.md-editor-preview-wrapper) {
      // padding-left: 0;
      // padding-right: 0;
    }
  }
}
</style>